Paginate html file in UIWebView 、 UIWebView分頁：2012-09-19星期三

問題：使用iOS UIWebView時，載入本地html檔案，但是該檔案太大，結果螢幕畫面形成一長條型顯示，雖然用滾動畫面可以看見整個html檔案，但是滑來滑去，不好用。

目標：用UIWebView載入html檔時，將html檔案切成一頁一頁，向左滑動螢幕可看下一頁，向右滑動螢幕可看下一頁。

做法：我用的是Xcode V4.2 Build 4C199， MAC OS X 10.6 (10K549)

(1) 用File/New/New Project產生一個新專案， 選iOS/Application/Single View Application。下一個螢幕，Product Name：UIWebViewPage、Company Identifier：com.yourcompany、 Class Prefix：UIWebViewPage ，Device Family:iPhone，勾選 Use Automatic Reference Counting，其他均不勾選。下一個螢幕，不勾選 Source Control: Create local git repository for this project。完成後，有UIWebViewPageAppDelegate.h、UIWebViewPageAppDelegate.m、UIWebViewPageViewController.h、UIWebViewPageViewController.m、UIWebViewPageViewController.xib。

(2)點UIWebViewPageViewController.xib，Navigation Area及Debug Area中有File's Owner、First Responder、View三個圖標icon，點View，Debug Area出現代表View的框框，在Utility Area最下方鍵入UIWebView，出現WebView圖示，將WebView圖示拉到View的框框，讓它佔滿整個View，這時View框框成了UIWebView框框。

(3)點UIWebViewPageViewController.h，加入「@property (strong, nonatomic) IBoutlet UIWebView* webView;」及<UIScrollViewDelegate>，如下：

@interface UIWebViewPageViewController : UIViewController <UIScrollViewDelegate> @property (strong, nonatomic) IBOutletUIWebView* webView; @end

(4)點UIWebViewPageViewController.m，加入「@synthesize webView;」，如下：

@implementation UIWebViewPageViewController @synthesize webView;

(5)點UIWebViewPageViewController.xib，點Debug Area的File's Owner，點Utility Area/Show the Connections inspector，Outlets下有webView，點右方圓圈並拉到Debug Area的UIWebView框框，將instance variable webView連上.xib的UIWebViewPageViewControllerUIWebView。

(6)準備一個html檔，我使用2012-09-19.htm，將其拉入專案，注意用「copy」。請注意2012-09-19.htm檔內的css3，如下：

<style> #swipe-horizontal{ font-size: 100%; -webkit-column-width:320px; height:440px; } </style>

說明：2012-09-19.htm檔內使用這一段css3可以讓滑動螢幕後，讓html檔一頁一頁地向左或向右滑入螢幕，主要的css3是「-webkit-column-width:320px;」這個設定column的css3將2012-09-19.htm橫向分頁。如果2012-09-19.htm檔內不使用這一段css3，滑動螢幕後，每一頁只會從上方或下方滑入螢幕。

(7)點UIWebViewPageViewController.m，修改viewDidLoad如下：

- (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // 將htm檔載入UIWebView NSString *path; NSBundle *thisBundle = [NSBundle mainBundle]; path = [thisBundle pathForResource:@"2012-09-19" ofType:@"htm"]; // make a file: URL out of the path NSURL *instructionsURL = [NSURL fileURLWithPath:path]; [webView loadRequest:[NSURLRequest requestWithURL:instructionsURL]];   //for iOS 4.x pagination // 以下是針對iOS4.x做UIWebView分頁 // 「pagingEnabled = YES;」將html檔案切成一頁一頁需將每一個subview均pagingEnabled // 同時，不要反彈，「bounces = NO;」 // 同時，不要有橫向滑動軸，「showsHorizontalScrollIndicator = NO;」 // 同時，不要有直向滑動軸，「showsVerticalScrollIndicator = NO;」   for(id subview in webView.subviews) if ([[subview class] isSubclassOfClass:[UIScrollView class]]) { ((UIScrollView *)subview).pagingEnabled = YES; ((UIScrollView *)subview).bounces = NO; ((UIScrollView *)subview).showsHorizontalScrollIndicator = NO; ((UIScrollView *)subview).showsVerticalScrollIndicator = NO; break; }   // for iOS 5.0 pagination // 以下是針對iOS5做UIWebView分頁，iOS5在UIWebView下有scrollView，所以不需要再對所有subview設定 // 可以試試將上段iOS4.x部份註解comment掉並用以下這一段 /* self.webView.scrollView.pagingEnabled = YES; self.webView.scrollView.bounces = NO; self.webView.scrollView.showsHorizontalScrollIndicator = NO; self.webView.scrollView.showsVerticalScrollIndicator = NO; */ }

說明：閱讀以上這一段程式碼的註解部份，即可了解viewDidLoad有兩大部份：

1. 將htm檔載入UIWebView：從「NSString *path;」到「[webView loadRequest:[NSURLRequestrequestWithURL:instructionsURL]];」，這一段程式是將htm檔載入UIWebView的標準作法。基本上是先設定path(用NSBundle)、NSURL，再用[webView loadRequest:...]將.htm檔載入webView。
2. 做UIWebView分頁：針對iOS4.x及iOS5不同，現針對iOS4.x說明：「for(id subview in webView.subviews)」及「if ([[subview class] isSubclassOfClass:[UIScrollView class]])」是在找到webView所有屬於UIScrollView class的subview，並將其pagingEnabled=YES，其他「bounces = NO;」、「showsHorizontalScrollIndicator = NO;」、「showsVerticalScrollIndicator = NO;」設定不要反彈、不要有橫向滑動軸、不要有直向滑動軸只是讓螢幕好看–些。iOS5因UIWebView有scrollView，故簡化很多，只要設定self.webView.scrollView的pagingEnabled=YES、showsHorizontalScrollIndicator = NO、showsVerticalScrollIndicator = NO即可。

結論：Paginate html file in UIWebView 、 UIWebView分頁看起來十分困難，其實，只有一行，iOS4.x：「((UIScrollView *)subview).pagingEnabled = YES;」，iOS5：「self.webView.scrollView.pagingEnabled = YES;」。這時，每一頁只會從上方或下方滑入螢幕，因此，2012-09-19.htm檔內需使用一段css3，主要是「-webkit-column-width:320px;」這個設定column的css3，將2012-09-19.htm橫向分頁。